<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>列表组面板和嵌入组件</title>
    <link rel="stylesheet" href="css/bootstrap.min.css">
</head>
<body>
<!--列表组组件-->
<!--基本实例-->
<ul class="list-group">
    <li class="list-group-item">1.这是起始</li>
    <li class="list-group-item">2.这是第二条数据</li>
    <li class="list-group-item">3.这是第三排信息</li>
    <li class="list-group-item">4.这是末尾</li>
</ul>

<!--列表项带勋章-->
<ul class="list-group">
    <li class="list-group-item">1.这是起始<span class="badge">10</span></li>
    <li class="list-group-item">2.这是第二条数据</li>
    <li class="list-group-item">3.这是第三排信息</li>
    <li class="list-group-item">4.这是末尾</li>
</ul>

<!--链接和首选-->
<div class="list-group">
    <a href="#" class="list-group-item">1.这是起始<span class="badge">10</span></a>
    <a href="#" class="list-group-item active">2.这是第二条数据</a>
    <a href="#" class="list-group-item list-group-item-success">3.这是第三排信息</a>
    <a href="#" class="list-group-item">4.这是末尾</a>
</div>


<!--按钮式列表-->
<div class="list-group">
    <button class="list-group-item">1.这是起始<span class="badge">10</span></button>
    <button class="list-group-item">2.这是第二条数据</button>
    <button class="list-group-item">3.这是第三排信息</button>
    <buttton class="list-group-item disabled">4.这是末尾</buttton>
</div>


<!--定制内容-->
<div class="list-group">
    <a href="#" class="list-group-item active">
        <h4>内容标题</h4>
        <p class="list-group-item-text">这里是相关内容详情</p>
    </a>
    <a href="#" class="list-group-item ">
        <h4>内容标题</h4>
        <p class="list-group-item-text">这里是相关内容详情</p>
    </a>
    <a href="#" class="list-group-item ">
        <h4>内容标题</h4>
        <p class="list-group-item-text">这里是相关内容详情</p>
    </a>
    <a href="#" class="list-group-item ">
        <h4>内容标题</h4>
        <p class="list-group-item-text">这里是相关内容详情</p>
    </a>
</div>


<!--面板组件-->
<!--基本实例-->
<div class="panel panel-default">
    <div class="panel-body">
        这里是详细内容区!
    </div>
</div>
<!--带标题容器的面板-->
<div class="panel panel-default">
    <div class="panel-heading">
        <h3 class="panel-title">面板标题</h3>
    </div>
    <div class="panel-body">
        这里是详细内容区!
    </div>
</div>
<!--带注脚的面板-->
<div class="panel panel-default">
    <div class="panel-heading">
        <h3 class="panel-title">面板标题</h3>
    </div>
    <div class="panel-body">
        这里是详细内容区!
    </div>
    <div class="panel-footer">
        这里是底部
    </div>
</div>

<!--情景-->
<div class="panel panel-default"></div>
<div class="panel panel-success"></div>
<div class="panel panel-info"></div>
<div class="panel panel-warning"></div>
<div class="panel panel-primary"></div>
<div class="panel panel-danger"></div>

<!--表格类面板-->
<div class="panel panel-default">
    <div class="panel-heading">
        <h3 class="panel-title">面板标题</h3>
    </div>
    <div class="panel-body">
        这里是详细内容区!
    </div>
    <table class="table">
        <tr>
            <th>1</th>
            <th>1</th>
            <th>1</th>
        </tr>
        <tr>
            <td>q</td>
            <td>q</td>
            <td>q</td>
        </tr>
    </table>
    <div class="panel-footer">
        这里是底部
    </div>
</div>

<!--响应式嵌入组件-->





<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>